// 该webpack插件用于生成特定于颜色的less / css并注入index.html文件中，以便您可以在浏览器中更改Ant Design特定的颜色主题。
const path = require("path");
const fs = require("fs");
const { override, fixBabelImports, addLessLoader, addWebpackPlugin } = require('customize-cra');
const AntDesignThemePlugin = require("./index"); // 生成特定于颜色的less / css并注入index.html文件中
const { getLessVars } = require('antd-theme-generator'); // 获取less 参数

const themeVariables = getLessVars(path.join(__dirname, './src/styles/vars.less'))
const defaultVars = getLessVars('./node_modules/antd/lib/style/themes/default.less')
// dark主题参数
const darkVars = { ...getLessVars('./node_modules/antd/lib/style/themes/dark.less'),
  '@primary-color': defaultVars['@primary-color'],
  '@picker-basic-cell-active-with-range-color': 'darken(@primary-color, 20%)',
  '@layout-header-background': defaultVars['@layout-header-background'],
  '@layout-sider-background': '#141414'
};
// light主题参数
// 初始化颜色
const lightVars = { ...getLessVars('./node_modules/antd/lib/style/themes/compact.less'),
  '@primary-color': defaultVars['@primary-color'],
  '@layout-header-background': 'rgb(24, 144, 255)',
  '@layout-sider-background': '#fff'
};

// 动态生成的json文件
fs.writeFileSync('./src/dark.json', JSON.stringify(darkVars));
fs.writeFileSync('./src/light.json', JSON.stringify(lightVars));
fs.writeFileSync('./src/theme.json', JSON.stringify(themeVariables));

// 配置参数，主要文件在index.js中
const options = {
  stylesDir: path.join(__dirname, './src'), // 这是自定义样式根目录
  antDir: path.join(__dirname, './node_modules/antd'), // antd目录
  varFile: path.join(__dirname, './src/styles/vars.less'), // 与主题相关的变量文件的路径
  themeVariables: Array.from(new Set([ // 您要动态更改的变量列表
    ...Object.keys(darkVars),
    ...Object.keys(lightVars),
    ...Object.keys(themeVariables),
  ])),
  generateOnce: false, // 每当Webpack由于开发中的某些代码更改而构建新代码时，此插件将再次运行
}


module.exports = override(
  fixBabelImports('import', { // 按需加载
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options), ),
  addLessLoader({
    javascriptEnabled: true
  }),
);
